<template>
<div>
  <el-container>
    <el-aside width="200px">
      <el-menu>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>系统管理</template>
            <el-menu-item index="1-1">
              <router-link to="/admin/user" tag="span">用户管理</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/admin/dept" tag="span">部门管理</router-link>
            </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        当前用户: {{username}}
        <el-button type="primary" size="mini" @click="logout">退出登录</el-button>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
import {mapState} from "vuex";
import axios from "axios";

export default {
  name: "AdminView",
  data() {
    return {}
  },
  computed:{
    ...mapState(["username"])
  },
  methods: {
    logout(){
      axios.post("/user/logout",{token:this.$store.state.token})
          .then(res=>{
            //清除vuex存储的用户信息
            this.$store.commit("setusername",'')
            //清除令牌
            this.$store.commit("setToken",'')
            //跳转登录页面
            this.$router.push("/")})
          .catch(err=>{
            console.log(err)
      })
    }
  }
}
</script>

<style scoped>

.el-header, .el-footer {
  background-color: #f6f3f3;
  color: #333;
  text-align: right;
  line-height: 60px;
}

.el-aside {
  background-color:  #304156;
  color: white;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: left;
  //line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-container{
  height: 584px
}

</style>